<template>
  <div id="userinformation">
    <div class="usr">
      <img :src="$store.state.user.szHeadPicUrl!=''?$store.state.user.szHeadPicUrl:require('../../assets//img/nopic.png')">
      <!-- <P class="user-id">游戏ID:{{$store.state.user.agentId}}</P> -->
    </div>
    <div class="agentInfo">
      <h2>{{$store.state.user.szNickName}}</h2>
      <p>推荐码 : <span class="infonum">{{$store.state.user.extendCode}}</span></p>
      <p>亲友群号 : <span class="infonum">{{$store.state.user.groupNo}}</span></p>
      <p>代理账号 : <span class="infonum">{{$store.state.user.accountName}}</span></p>
    </div>
    <nav-button class="nav" :top="26" to="/rankinfo">
      <template v-if="$store.state.user.agentLevel==1">
                  <img  src="../../assets/img/golid.png"   slot="icon" >  金牌代理 >
</template>
<template v-if="$store.state.user.agentLevel==2">
  <img src="../../assets/img/ying.png" slot="icon">
  银牌牌代理 >
</template>
<template v-if="$store.state.user.agentLevel==3">
  <img src="../../assets/img/tong.png" slot="icon">
  铜牌代理 >
</template>
     
    </nav-button>
     <nav-button class="nav" :top="55"  to="/help">
     <img  src="../../assets/img/help.png"    slot="icon"  >
      代理FAQ >
     </nav-button>
   
</div>  
</template>


<script>
  import NavButton from "./NavButton"
  export default {
    name: "userinformation",
    components: {
      NavButton
    },
    data() {
      return {
        jingpai: require("../../assets/img/golid.png"),
        yinpai: require("../../assets/img/ying.png"),
        tongpai: require("../../assets/img/tong.png"),
        help: require("../../assets/img/help.png")
      };
    }
  };
</script>

<style lang="scss" scoped>
  $paddngleft: 9.090909rem;
  ;
  $paddngright: 80px;
  $imgWidth: 6.666667rem;
  #userinformation {
    background: #fffbef url("../../assets/img/top.png") no-repeat bottom center;
    background-size: cover;
    height: 11.818182rem;
    overflow: hidden;
    @media screen and (min-width: 600px) and (max-width:720px) {
      height:11.818182rem;
      ;
    }
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    .usr {
      align-items: center;
      text-align: center;
      width: $paddngleft;
      @media screen and (min-width: 600px) and (max-width:720px) {
        width: 200px;
      }
      img {
        width: $paddngleft*0.8;
        display: block;
        margin: 0 auto;
        border-radius: 50%;
        background: #fff;
      }
      .user-id {
        font-size: 13px;
        margin-top: 0.833333rem;
        color: #441900;
      }
    }
    .agentInfo {
      flex: 1;
      color: #441900;
      h2 {
        font-size: 1.5rem;
        margin-bottom: 10px;
        white-space: nowrap;
      }
      p {
        font-size: 1.25rem;
        line-height: 1.8;
        .infonum {
          color: #fff089;
        }
      }
    }
    .help {
      position: absolute;
      right: 0;
      top: 60%;
      transform: translateY(-50%);
      width: $paddngright;
    }
    .nav {
      position: absolute;
      right: 0;
      top: 26%;
    }
  }
</style>

